<template>
	<view class="p_bg_f3" style="padding-top: 96rpx;">
		<view class="tab_wrapper">
			<view class="p_font_28 p_color_7a tab" :class="{'active': tabNum == item.id}" v-for="item in tabList"
				:key="item.id" @click="getTb(item)">
				{{item.name}}
			</view>
		</view>
		<view class="main" v-if="listData.length === 0">
			<noneData noneTitle="暂无订单~"></noneData>
		</view>
		<view class="main" v-else>
			<navigator :url="'/pages/my/orderDetail?id=' + item.id + '&payType=' + item.pay_type" hover-class="none"
				class="list_wrapper" v-for="item in listData" :key="item.id">
				<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" mode="aspectFill" class="p_img_64 p_margin_r_16"></image>
				<view class="p_flex_2">
					<view class="p_flex">
						<view class="p_font_32 p_flex_1 p_one_text">{{item.name}}</view>
						<view class="p_font_28 list_status"
							:class="(item.pay_status == 4 || item.pay_status == 6)?'p_color_fe8f0d': item.pay_status == 5?'p_color_ff5555': 'p_color_05b570'">
							{{getStatusString(item.pay_status)}}
						</view>
					</view>
					<view class="p_font_28 p_color_b2 p_margin_t_8">文件数量<text
							class="p_color_7a p_margin_l_16">{{item.file_num}}个</text>
					</view>
					<view class="p_font_28 p_color_b2 p_margin_t_8 p_flex2">订单编号<text
							class="p_color_7a p_margin_l_16">{{item.order_num}}</text><text class="p_font_20 p_copy"
							v-if="item.pay_status == 0 && item.pay_type != 0"
							@click.stop="getCopyOrder(item.order_num)">复制</text></view>
					<view class="p_font_28 p_color_b2 p_margin_t_8">下单时间<text
							class="p_color_7a p_margin_l_16">{{item.create_time}}</text></view>
					<view class="p_font_28 p_color_b2 p_margin_t_8">订单金额<text
							class="p_color_ff5555 p_margin_l_16">{{item.total_price}}元</text></view>
					<view class="p_flex10 p_margin_t_26">
						<view class="list_btn btn01" v-if="item.is_taobao"
							@click.stop="setReview(item)">好评返现</view>
						<view class="list_btn btn01" v-if="item.pay_status == 0 || item.pay_status == 1"
							@click.stop="getAddress(item)">修改地址</view>
						<view class="list_btn btn01" v-if="item.pay_status == 0 && item.pay_type == 0"
							@click.stop="orderIsShow = true;orderItem = item">取消订单</view>
						<view class="list_btn btn01" v-if="item.pay_status == 2" @click.stop="getWuliu(item)">查看物流
						</view>
						<view class="list_btn btn02" v-if="item.pay_status == 0 && item.pay_type == 0"
							@click.stop="getPay(item)">立即支付</view>
						<view class="list_btn btn02" v-if="item.pay_status == 2" @click.stop="getSure(item)">确认收货</view>
						<view class="p_font_22 p_color_fe8f0d" v-if="item.pay_status == 5">退款申请被驳回，可再次申请退款</view>
						<view class="list_btn btn01" v-if="item.pay_status == 3 || item.pay_status == 5"
							@click.stop="getLink(item)">申请退款</view>
						<view class="list_btn btn02" v-if="item.pay_status == 0 && item.pay_type != 0"
							@click.stop="getPayWx(item.order_num)">微信支付</view>						
					</view>
				</view>
			</navigator>
			<view class="p_font_24 p_color_7a p_text_c p_b_36" v-if="loadingText">{{loadingText}}</view>
		</view>
		<!-- 物流 -->
		<logistics ref="logView" :isShow="logisShow" :infoId="chooseId" :infoNum="expressNum" :infoName="expressName" @getClose="logisShow = false"></logistics>
		<!-- 支付 -->
		<pay :wx="true" ref="payView" :isShow="isPayShow" :priceNum="payPrice" @getClose="isPayShow = false"
			@getChoosePay="getChoosePay" @getWxPaySuccess="getWxPaySuccess"></pay>
		<!--  -->
		<tips messages="是否确定取消该订单？" confirmText="确定" cancelText="再想想" :tipsShow="orderIsShow"
			@getDialogCancel="orderIsShow = false" @getDialogConfirm="getCancelOrder(orderItem)"></tips>
      
    <view class="service-fixed-btn" @click="show = true">
      <image class="icon" src="/subpages/static/service.png"></image>
    </view>
    
    <van-popup :show="show" @close="show = false">
      <image v-if="serviceCodeUrl" class="service-code" useSlot :src="serviceCodeUrl" mode="widthFix"></image>
    </van-popup>
	</view>
</template>

<script>
	import tips from '../../components/tips.vue';
	import logistics from './components/logistics.vue';
	import noneData from '../../components/noneData.vue';
	import pay from '../../pages/index/components/pay.vue';

	export default {
		components: {
			pay,
			tips,
			logistics,
			noneData
		},
		data() {
			return {
				tabNum: 0,
				tabList: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '待付款'
				}, {
					id: 2,
					name: '待打印'
				}, {
					id: 3,
					name: '待收货'
				}, {
					id: 4,
					name: '已完成'
				}, {
					id: 5,
					name: '退款/售后'
				}],
				pageNum: 1,
				listData: [],
				isLastPage: false, // 是否是最后一页
				loadingText: '',
				logisShow: false,
				chooseId: '',
				expressNum: '',
				expressName: '',
				isPayShow: false,
				payPrice: 0,
				orderNum: '', // 订单号
				orderId: '', // 订单id
				orderIsShow: false,
				orderItem: {},
				isBtn: true,
        show: false,
        serviceCodeUrl: '',
			}
		},
		onLoad(e) {
      this.getInfo();
			this.tabNum = e.type;
			this.getListData();
		},
		onShow() {
			if (uni.getStorageSync('orderUp')) {
				this.getRList();
				uni.removeStorageSync('orderUp');
			}

			if (uni.getStorageSync('orderUpRefund')) {
				this.tabNum = 5;
				this.getRList();
				uni.removeStorageSync('orderUpRefund');
			}
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.loadingText = '加载中...';
				this.pageNum++;
				this.getListData();
			} else {
				this.loadingText = '已加载全部';
			}
		},
		methods: {
      getInfo() {
      	this.$http.post(this.$api.priceRemark).then(res => {
      		this.serviceCodeUrl = res.data.image;
          console.log(this.serviceCodeUrl)
      	})
      },
			getListData() {
				this.$http.post(this.$api.orderList, {
					page: this.pageNum,
					type: this.tabNum
				}).then(res => {
					this.listData = this.listData.concat(res.data.data);

					if (this.pageNum === res.data.last_page) {
						this.isLastPage = true;
						this.loadingText = '已加载全部';
					} else {
						this.isLastPage = false;
					}
				})
			},
			getTb(item) {
				this.tabNum = item.id;
				this.getRList();
			},
			getRList() {
				this.pageNum = 1;
				this.listData = [];
				this.isLastPage = false;
				this.loadingText = '';

				this.getListData();
			},
			getStatusString(e) {
				// 0=待支付,1=待打印,2=待收货,3=已完成,4=退款中,5=已驳回,6=退款成功
				let s_ = '';
				let arr = [{
					id: 0,
					name: '待支付'
				}, {
					id: 1,
					name: '待打印'
				}, {
					id: 2,
					name: '待收货'
				}, {
					id: 3,
					name: '已完成'
				}, {
					id: 4,
					name: '退款中'
				}, {
					id: 5,
					name: '已驳回'
				}, {
					id: 6,
					name: '退款成功'
				}]

				arr.forEach((n) => {
					if (n.id == e) {
						s_ = n.name
					}
				})

				return s_
			},
			getCancelOrder(item) {
				this.$http.post(this.$api.cancelOrder, {
					id: item.id
				}).then(res => {
					this.orderIsShow = false;
					this.getRList();
				})
			},
			getWuliu(item) {
				this.logisShow = true;
				this.chooseId = item.id;
				this.expressNum = item.express_num;
				this.expressName = item.express_name;
				this.$refs.logView.getExpress(item.id);
			},
			getPay(item) {
				this.isPayShow = true;
				this.payPrice = item.total_price;
				this.orderNum = item.order_num;
				this.orderId = item.id;
			},
			getChoosePay(e) {
				this.isPayShow = false;

				if (!this.isBtn) return

				this.isBtn = false;

				if (e == 0) {
					this.$refs.payView.wxPay(this.orderNum, 'order');
				}
				if (e == 1) {
					let id = this.orderId;
					getApp().getNavigateTo('/pages/index/taobaoPay?id=' + id);
				}
				if (e == 2) {
					let id = this.orderId;
					getApp().getNavigateTo('/pages/index/pddPay?id=' + id);
				}

				setTimeout(() => {
					this.isBtn = true;
				}, 500)
			},
			getWxPaySuccess() {
				this.getRList();
			},
			getSure(item) {
				this.$http.post(this.$api.confirmOrder, {
					id: item.id
				}).then(res => {
					this.getRList();
				})
			},
			getLink(item) {
				getApp().getNavigateTo('/pages/my/refund?type=1&id=' + item.id);
			},
			// 复制订单号
			getCopyOrder(order) {
				uni.setClipboardData({
					data: order, // 复制的文本内容
					success(res) {
						getApp().getMsg('复制成功', 'success');
					},
					fail(err) {
						getApp().getMsg('复制失败，请重试');
					}
				});
			},
			// 微信支付
			getPayWx(order) {
				let self = this;
				this.$http.post(this.$api.pay, {
					order_num: order
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function() {
							getApp().getMsg('支付成功', 'success');
							self.getRList();
						},
						fail: function(err) {
							getApp().getMsg('您放弃了支付');
						}
					});
				})
			},
			// 修改地址
			getAddress(item) {
				getApp().getNavigateTo('/pages/my/orderAddress?order_id=' + item.id)
			},
			// 好评返现
			setReview(item){
				getApp().getNavigateTo('/pages/my/goodReview?order_id=' + item.id)
			},
			// async isTaobao(item) {
			//     if (item && item.pay_status == 3 && item.pay_type == 1) {
			//         try {
			//             const res = await this.$http.post(this.$api.isTaobao, {});
			//             if (res.code == 20000) {
			//                 return true;
			//             } else {
			//                 return false;
			//             }
			//         } catch (error) {
			//             console.error('API 请求失败:', error);
			//             return false;
			//         }
			//     } else {
			//         return false;
			//     }
			// }
		}
	}
</script>

<style lang="less">
  .service-fixed-btn {
    position: fixed;
    right: 32rpx;
    bottom: 10vh;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: rgba(#000,.5);
    .icon {
      display: block;
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
	.tab_wrapper {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0px 5rpx 10rpx #F3F3F3;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 32rpx;
		position: fixed;
		top: 0;
		width: 100%;

		.tab {
			text-align: center;
			padding: 10rpx 0;
			width: 96rpx;

			&:first-child {
				width: 64rpx;
			}

			&:last-child {
				width: 142rpx;
			}
		}

		.active {
			font-size: 32rpx;
			color: #222;
		}
	}

	.main {
		padding: 0 32rpx;
		overflow: hidden;
		min-height: calc(100vh - 96rpx);
	}

	.list_wrapper {
		padding: 32rpx;
		margin: 32rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		display: flex;
	}

	.list_status {
		width: 200rpx;
		text-align: right;
	}

	.list_btn {
		width: 152rpx;
		height: 52rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 80rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		box-sizing: border-box;
		margin-left: 16rpx;

		&.btn01 {
			color: #7A7A7A;
			border: 1px solid #E8E8E8;
		}

		&.btn02 {
			color: #fff;
			background-color: #05B570;
		}
	}

	.p_copy {
		margin: 0 0 0 20rpx;
		border-radius: 32rpx;
		padding: 8rpx 16rpx;
		color: #05B570;
		border: 1px solid #05B570;
	}
</style>
